<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions"
	xmlns:p="http://primefaces.org/ui">




<ui:composition template="/templates/internal.xhtml">
	<ui:define name="center">

 	
		<p:growl id="messages" showDetail="true" />
		
		<h:form id="formSchedule" prependId="false">

	<script type="text/javascript">
		$( document ).ready(function() {
			toggleSchedule();
		});
	
		function ext() {
			   this.cfg.axes = {
			       xaxis:
			       {
			           tickInterval: 1,
			           min:1,
			           max:52,
			           tickOptions: { 
			               formatString: '%d' 
			           } 
			       }
			   };
			}	

		function toggleSchedule() {
			if(wbtnGoals.jq.hasClass("ui-state-active")){
				$('#rowCompetitions').show();
				$('#rowGoals').show();			
			}else{
				 $('#rowCompetitions').hide();
				 $('#rowGoals').hide();			
			}

			if(wbtnExams.jq.hasClass("ui-state-active")){
				$('#rowPsych').show();
				$('#rowMedic').show();			
				$('#rowExams').show();			
			}else{
				$('#rowPsych').hide();
				$('#rowMedic').hide();			
				$('#rowExams').hide();			
			}
		
			if(wbtnQuantity.jq.hasClass("ui-state-active")){
				$('#rowYield').show();
				$('#rowRelated').show();
				$('#rowPrescribed').show();
				$('#rowPlanned').show();
			}else{
				$('#rowYield').hide();
				$('#rowRelated').hide();
				$('#rowPrescribed').hide();
				$('#rowPlanned').hide();
			}
			if(wbtnGraphic.jq.hasClass("ui-state-active")){
				$('#rowGraphic').show();
				if($('#rowGraphic').is(':visible')){
					wscheduleGraphic.render();
				}	
			}else{
				$('#rowGraphic').hide();
			}
		}	
		</script>

		    <p:contextMenu for="btnModalitys">
		        <p:menuitem value="#{msgs.New}"	icon="ui-icon-document"	action="#{scheduleBean.addModality}" update=":modalAddModality" oncomplete="wmodalAddModality.show()" />
			</p:contextMenu>

			<c:forEach var="schedule" varStatus="scheduleIndex" items="#{scheduleBean.schedules}">
	
			    <p:contextMenu for="btnschedule#{scheduleIndex.count - 1}">
					<p:menuitem value="#{schedule.modality.name}" disabled="true"/>
					<p:separator/>
			        <p:menuitem value="#{msgs.CycleType}" actionListener="#{scheduleBean.toNewCycleType}"  		icon="ui-icon-document" update=":newCycleType" oncomplete="wnewCycleType.show()">
						<f:setPropertyActionListener value="#{schedule}" 	target="#{ scheduleBean.selSchedule}"  />
			        </p:menuitem>
			        <p:menuitem value="Colar" 		icon="ui-icon-document-b" 	action="#{scheduleBean.pasteCycleType}"
			        	disabled="#{scheduleBean.copyCycleType == null}" update="formSchedule" ajax="true">
						<f:setPropertyActionListener value="#{schedule}" 	target="#{scheduleBean.selSchedule}"  />
			        </p:menuitem>
			        <p:menuitem value="#{msgs.Delete}..." 		icon="ui-icon-close" 	actionListener="#{tableBean.deleteCar}" />
			    </p:contextMenu>
	
				<c:forEach var="cycleType" varStatus="cycleTypeIndex" items="#{schedule.cycleTypes}" >

				    <p:contextMenu for="btncycletype#{scheduleIndex.count - 1}#{cycleTypeIndex.count - 1}">
						<p:menuitem value="#{cycleType.name}" disabled="true"/>
						<p:separator/>
				        <p:menuitem value="Copiar"  		icon="ui-icon-document" update=":formSchedule" >
							<f:setPropertyActionListener value="#{schedule}" 	target="#{scheduleBean.selSchedule}"  />
							<f:setPropertyActionListener value="#{cycleType}"	target="#{scheduleBean.copyCycleType}"  />
				        </p:menuitem>
					</p:contextMenu>

					<c:forEach var="cycle" varStatus="cycleIndex" items="#{cycleType.cycles}" >
					    <p:contextMenu for="btncycle#{scheduleIndex.count - 1}#{cycleTypeIndex.count - 1}#{cycleIndex.count - 1}">
							<p:menuitem value="#{schedule.modality.name}" disabled="true"/>
							<p:menuitem value="#{cycle.name} - #{subCycle.name}" disabled="true"/>
	
							<p:separator/>
					        <p:menuitem value="#{msgs.New}..." 		icon="ui-icon-search" 	oncomplete="wnewSchedule.show()"/>
					        <p:menuitem value="#{msgs.Delete}..." 	icon="ui-icon-close" 	actionListener="#{tableBean.deleteCar}"/>
					    </p:contextMenu>
					</c:forEach>		
				</c:forEach>
			</c:forEach>

			<div class="ui-widget ui-panel " style="width:99%" >
			    <p:panelGrid id="tblSchedules"  >
					<f:facet name="header">
						<p:row >	
							<p:column  colspan="56" >
								<p:commandButton action="#{scheduleBean.loadSchedule}" ajax="true"  styleClass="ui-button-icon-only" icon="ui-icon-triangle-1-w" update="formSchedule">
									<f:setPropertyActionListener target="#{scheduleBean.year}" value="#{scheduleBean.year - 1}"/>
								</p:commandButton>
								<p:spacer height="1" width="100" />
								<p:outputLabel value="#{scheduleBean.year}"/>
								<p:spacer height="1" width="100" />
								<p:commandButton action="#{scheduleBean.loadSchedule}" ajax="true" styleClass="ui-button-icon-only" icon="ui-icon-triangle-1-e" update="formSchedule" >	
									<f:setPropertyActionListener target="#{scheduleBean.year}" value="#{scheduleBean.year + 1}"/>
								</p:commandButton>
							</p:column>
						</p:row>
						<p:row >	
							<p:column  rowspan="2" colspan="3" style="padding:0px;margin:0px;width:150px;height:35px">
								<p:commandButton id="btnModalitys" value="#{msgs.Modalitys}"  styleClass="ui-no-corner-all" style="margin:0px;border:none;width:150px;height:35px"/>
							</p:column>
							<c:forEach var="month" items="#{scheduleBean.yearCycle.cycles}">
								<p:column colspan="#{fn:length(month.microCycles)}" style="padding:0px;margin:0px">
									#{month.name}
								</p:column>
							</c:forEach>
						</p:row>
						<p:row>
							<c:forEach var="month" items="#{scheduleBean.yearCycle.cycles}" varStatus="monthIndex">
								<c:forEach var="week" items="#{month.microCycles}" varStatus="weekIndex">
									<p:column colspan="1" style="padding:0px;margin:0px;text-align:center;overflow:hidden;display: table-cell;white-space: nowrap;width:30px">
										<p:commandButton id="btnweek#{monthIndex.count}#{weekIndex.count}" value="#{week.name}" styleClass="ui-no-corner-all" style="margin:-10px;border:none;text-align:center;"/>
									</p:column>
								</c:forEach>
							</c:forEach>
						</p:row>
					</f:facet>
	
					<c:forEach var="schedule" varStatus="scheduleIndex" items="#{scheduleBean.schedules}">
						<p:row>
							<p:column colspan="3" styleClass="ui-widget-header"  style="padding:0px;margin:0px;">
								<p:commandButton id="btnschedule#{scheduleIndex.count - 1}" value="#{schedule.modality.name}" styleClass="ui-no-corner-all"  style="margin:0px;border:none;width:150px" />
							</p:column>
							<p:column colspan="56" styleClass="ui-widget-header"/>
						</p:row>
						<c:forEach var="cycleType" varStatus="cycleTypeIndex" items="#{schedule.cycleTypes}" >
							<p:row >
								<p:column  style="height:15px" colspan="1">
									<p:outputLabel id="btncycletype#{scheduleIndex.count - 1}#{cycleTypeIndex.count - 1}" value="#{cycleType.name}"/> 							
								</p:column>
								<p:column colspan="1"  style="width:20px;padding:0px;margin:0px;text-align:center;overflow:hidden;display: table-cell;white-space: nowrap;">
									<p:commandButton icon="ui-icon-pencil" style="margin:-5px;border:none;text-align:center;" />
								</p:column>
								<p:column colspan="1" style="width:20px;padding:0px;margin:0px;text-align:center;overflow:hidden;display: table-cell;white-space: nowrap;">
									<p:commandButton icon="ui-icon-trash"  style="margin:-5px;border:none;text-align:center;" />
								</p:column>
	
								<c:forEach var="cycle" varStatus="cycleIndex" items="#{cycleType.cycles}" >
									<p:column disabledSelection="true"  colspan="#{fn:length(cycle.microCycles) / 1 }" styleClass="ui-widget-header" style="padding:0px;margin:0px;text-align:center;overflow:hidden;display: table-cell;white-space: nowrap;"   >
										<p:commandButton id="btncycle#{scheduleIndex.count - 1}#{cycleTypeIndex.count - 1}#{cycleIndex.count - 1}"  value="#{cycle.name}" style=";margin:-10px;border:none;text-align:center;" update=":cycleDetails">
											<f:setPropertyActionListener value="#{schedule}" 				target="#{scheduleBean.selSchedule}"  />
 											<f:setPropertyActionListener value="#{selCycleType}" 			target="#{scheduleBean.selCycleType}"  />
 											<f:setPropertyActionListener value="#{cycle}" 					target="#{scheduleBean.selCycle}"  /> 
										</p:commandButton>
									</p:column>
								</c:forEach>		
							</p:row>
						</c:forEach>
						<p:row >
							<p:column  style="height:15px" colspan="3">
								<p:outputLabel value="#{msgs.MicroCycles}"/> 							
							</p:column>

							<c:forEach var="microCycle" varStatus="microCycleIndex" items="#{schedule.microCycles}" >
								<p:column disabledSelection="true"  colspan="1" styleClass="ui-widget-header" style="padding:0px;margin:0px;text-align:center;overflow:hidden;display: table-cell;white-space: nowrap;"   >
									<p:commandButton id="btnmicrocycle#{scheduleIndex.count - 1}#{microCycleIndex.count - 1}"  value="#{microCycle.name}" style=";margin:-10px;border:none;text-align:center;" update=":cycleDetails">
										<f:setPropertyActionListener value="#{schedule}" 				target="#{scheduleBean.selSchedule}"  />
											<f:setPropertyActionListener value="#{microCycle}" 			target="#{scheduleBean.selMicroCycle}"  />
									</p:commandButton>
								</p:column>
							</c:forEach>		
						</p:row>
					</c:forEach>	
						
					<p:row>
						<p:column colspan="56" styleClass="ui-widget-header" >
							<p:separator/>					
						</p:column>
					</p:row>
	
					<p:row>
						<p:column colspan="2" styleClass="ui-widget-header"  style="padding:0px;margin:0px;width:130px">
							<p:commandButton value="Objetivos"  styleClass="ui-no-corner-all" style="margin:0px;border:none;width:130px" />
						</p:column>
						<p:column colspan="1"  styleClass="ui-widget-header"  style="padding:0px;margin:0px;text-align:center;overflow:hidden;display: table-cell;white-space: nowrap;">
							<p:selectBooleanButton id="btnGoals" value="#{scheduleBean.showGoals}" styleClass="ui-button-icon-only" onLabel="." offLabel="." onIcon="ui-icon-triangle-1-n" offIcon="ui-icon-triangle-1-s" 
								widgetVar="wbtnGoals"  onchange="toggleSchedule()" style="margin:-5px;border:none;text-align:center;heigth:30px">
						    </p:selectBooleanButton>
						</p:column>
						<p:column colspan="53" styleClass="ui-widget-header"/>
					</p:row>
					
					<p:row id="rowCompetitions" >
						<p:column  style="height:15px" colspan="3" >
							<p:outputLabel value="Competições"/> 							
						</p:column>

						<c:forEach var="month" items="#{scheduleBean.yearCycle.cycles}" varStatus="monthIndex">
							<c:forEach var="week" items="#{month.microCycles}" varStatus="weekIndex">
								<p:column colspan="1" style="padding:0px;margin:0px;text-align:center;overflow:hidden;display: table-cell;white-space: nowrap;width:30px">
									<p:commandButton icon="ui-icon-favorite" styleClass="ui-no-corner-all, ui-button-icon-only" style="margin:-10px;border:none;text-align:center;"/>
								</p:column>
							</c:forEach>
						</c:forEach>
					</p:row>					 
	
					<p:row id="rowGoals" >
						<p:column  style="height:15px" colspan="3">
							<p:outputLabel value="Metas"/> 							
						</p:column>
						<c:forEach var="month" items="#{scheduleBean.yearCycle.cycles}" varStatus="monthIndex">
							<c:forEach var="week" items="#{month.microCycles}" varStatus="weekIndex">
								<p:column colspan="1"  styleClass="ui-no-corner-all" style="padding:0px;margin:0px;text-align:center;overflow:hidden;display: table-cell;white-space: nowrap;width:30px">
									<p:commandButton value="." style="margin:-10px;border:none;text-align:center;"/>
								</p:column>
							</c:forEach>
						</c:forEach>
					</p:row>					 
	
					<p:row>
						<p:column colspan="56" styleClass="ui-widget-header" >
							<p:separator/>					
						</p:column>
					</p:row>
	
					<p:row>
						<p:column colspan="2" styleClass="ui-widget-header"  style="padding:0px;margin:0px;width:130px">
							<p:commandButton  value="Avaliações"  styleClass="ui-no-corner-all"  style="margin:0px;border:none;width:130px" />
						</p:column>
						<p:column colspan="1"  styleClass="ui-widget-header"  style="padding:0px;margin:0px;text-align:center;overflow:hidden;display: table-cell;white-space: nowrap;">
							<p:selectBooleanButton  value="#{scheduleBean.showExams}" styleClass="ui-button-icon-only" onLabel="." offLabel="." onIcon="ui-icon-triangle-1-n" offIcon="ui-icon-triangle-1-s"
								widgetVar="wbtnExams" onchange="toggleSchedule()"	style="margin:-5px;border:none;text-align:center;">
						    </p:selectBooleanButton>
						</p:column>
	
						<p:column colspan="53" styleClass="ui-widget-header"/>
					</p:row>
	
					<p:row id="rowPsych" >
						<p:column  style="height:15px" colspan="3">
							<p:outputLabel value="Psicológico"/> 							
						</p:column>
						<c:forEach var="month" items="#{scheduleBean.yearCycle.cycles}" varStatus="monthIndex">
							<c:forEach var="week" items="#{month.microCycles}" varStatus="weekIndex">
								<p:column colspan="1" style="padding:0px;margin:0px;text-align:center;overflow:hidden;display: table-cell;white-space: nowrap;width:30px;">
									<p:commandButton icon="ui-icon-clipboard"  styleClass="ui-no-corner-all,ui-button-icon-only" style="margin:-10px;border:none;text-align:center;"/>
								</p:column>
							</c:forEach>
						</c:forEach>
					</p:row>					 
	
					<p:row id="rowMedic">
						<p:column  style="height:15px" colspan="3">
							<p:outputLabel value="Exames Médicos"/> 							
						</p:column>
						<c:forEach var="month" items="#{scheduleBean.yearCycle.cycles}" varStatus="monthIndex">
							<c:forEach var="week" items="#{month.microCycles}" varStatus="weekIndex">
								<p:column colspan="1" style="padding:0px;margin:0px;text-align:center;overflow:hidden;display:table-cell;white-space:nowrap;width:30px;height:15px">
									<p:commandButton value="."  styleClass="ui-no-corner-all" style="margin:-10px;border:none;text-align:center;"/>
								</p:column>
							</c:forEach>
						</c:forEach>
					</p:row>					 
	
					<p:row id="rowExams" >
						<p:column  style="height:15px" colspan="3">
							<p:outputLabel value="Exames"/> 							
						</p:column>
						<c:forEach var="month" items="#{scheduleBean.yearCycle.cycles}" varStatus="monthIndex">
							<c:forEach var="week" items="#{month.microCycles}" varStatus="weekIndex">
								<p:column colspan="1" style="padding:0px;margin:0px;text-align:center;overflow:hidden;display: table-cell;white-space: nowrap;width:30px;">
									<p:commandButton icon="" styleClass="ui-button-icon-only" style="margin:-10px;border:none;text-align:center;"/>
								</p:column>
							</c:forEach>
						</c:forEach>
					</p:row>					 
	
					<p:row>
						<p:column colspan="56" styleClass="ui-widget-header" >
							<p:separator/>					
						</p:column>
					</p:row>
	
					<p:row>
						<p:column colspan="2" styleClass="ui-widget-header"  style="padding:0px;margin:0px;">
							<p:commandButton  value="Quantificação"  style="margin:0px;border:none;width:130px" />
						</p:column>
						<p:column colspan="1"  styleClass="ui-widget-header"  style="padding:0px;margin:0px;text-align:center;overflow:hidden;display: table-cell;white-space: nowrap;">
							<p:selectBooleanButton widgetVar="wbtnQuantity" value="#{scheduleBean.showQuantitys}" styleClass="ui-button-icon-only" onLabel="." offLabel="." onIcon="ui-icon-triangle-1-n" offIcon="ui-icon-triangle-1-s"
								onchange="toggleSchedule()"	style="margin:-5px;border:none;text-align:center;">
						    </p:selectBooleanButton>
						</p:column>
	
						<p:column colspan="53" styleClass="ui-widget-header"/>
					</p:row>
	
					<p:row id="rowPlanned" > 
						<p:column  style="height:15px" colspan="3">
							<p:outputLabel value="Planejada"/> 							
						</p:column>
						<c:forEach var="month" items="#{scheduleBean.yearCycle.cycles}" varStatus="monthIndex">
							<c:forEach var="week" items="#{month.microCycles}" varStatus="weekIndex">
								<p:column colspan="1" style="padding:0px;margin:0px;text-align:center;overflow:hidden;display: table-cell;white-space: nowrap;width:30px;">
	
								</p:column>
							</c:forEach>
						</c:forEach>
					</p:row>					 
	
	
					<p:row id="rowPrescribed">
						<p:column  style="height:15px" colspan="3">
							<p:outputLabel value="Prescrita"/> 							
						</p:column>
						<c:forEach var="month" items="#{scheduleBean.yearCycle.cycles}" varStatus="monthIndex">
							<c:forEach var="week" items="#{month.microCycles}" varStatus="weekIndex">
								<p:column colspan="1" style="padding:0px;margin:0px;text-align:center;overflow:hidden;display: table-cell;white-space: nowrap;width:30px;">
	
								</p:column>
							</c:forEach>
						</c:forEach>
					</p:row>					 
	
	
					<p:row id="rowRelated">
						<p:column  style="height:15px" colspan="3">
							<p:outputLabel value="Relatada"/> 							
						</p:column>
						<c:forEach var="month" items="#{scheduleBean.yearCycle.cycles}" varStatus="monthIndex">
							<c:forEach var="week" items="#{month.microCycles}" varStatus="weekIndex">
								<p:column colspan="1" style="padding:0px;margin:0px;text-align:center;overflow:hidden;display: table-cell;white-space: nowrap;width:30px;">
	
								</p:column>
							</c:forEach>
						</c:forEach>
					</p:row>					 

					<p:row id="rowYield">
						<p:column  style="height:15px" colspan="3">
							<p:outputLabel value="Rendimento"/> 							
						</p:column>
						<c:forEach var="month" items="#{scheduleBean.yearCycle.cycles}" varStatus="monthIndex">
							<c:forEach var="week" items="#{month.microCycles}" varStatus="weekIndex">
								<p:column colspan="1" style="padding:0px;margin:0px;text-align:center;overflow:hidden;display: table-cell;white-space: nowrap;width:30px;"/>
							</c:forEach>
						</c:forEach>
					</p:row>					 
	
					<p:row>
						<p:column colspan="56" styleClass="ui-widget-header" >
							<p:separator/>					
						</p:column>
					</p:row>
	
	
					<p:row>
						<p:column colspan="2" styleClass="ui-widget-header"  style="padding:0px;margin:0px;width:130px">
							<p:commandButton value="Gráfico"  styleClass="ui-no-corner-all" style="margin:0px;border:none;width:130px" />
						</p:column>
						
						<p:column colspan="1"  styleClass="ui-widget-header"  style="padding:0px;margin:0px;text-align:center;overflow:hidden;display: table-cell;white-space: nowrap;">
							<p:selectBooleanButton widgetVar="wbtnGraphic" value="#{scheduleBean.showGraphic}" styleClass="ui-button-icon-only" onLabel="." offLabel="." onIcon="ui-icon-triangle-1-n" offIcon="ui-icon-triangle-1-s"
								onchange="$('#rowGraphic').toggle($('#rowGraphic').is(':hidden'));toggleSchedule()"	style="margin:-5px;border:none;text-align:center;">
						    </p:selectBooleanButton>
						</p:column>						
						<p:column colspan="53" styleClass="ui-widget-header"/>
					</p:row>
	
					<p:row id="rowGraphic"  >
						<p:column colspan="3"  />
						<p:column colspan="52" styleClass="ui-widget"    >
							<p:lineChart id="scheduleGraphic" value="#{scheduleBean.scheduleGraphic}" legendPosition="e" animate="true" 
		 						widgetVar="wscheduleGraphic"	 minY="0" maxY="10"  style="height:100%" minX="0" maxX="52" extender="ext" />
						</p:column>
					</p:row>
        
			    </p:panelGrid>
			</div>
		</h:form>		

	</ui:define>

	<ui:define name="menu">

	</ui:define>

	<ui:define name="tools">
		<p:tabView id="cycleDetails" style="heigth:100%">
			<p:tab  title="#{msgs.CicleData}">
				<p:accordionPanel activeIndex="-1">
					<p:tab title="#{msgs.BasicData}">
						<h:panelGrid columns="2" cellpadding="2">
							<p:outputLabel  value="#{msgs.CicleBegin} :"/>
							<h:outputText value="#{scheduleBean.selCycle.microCycles[0].beginDate}">
								<f:convertDateTime locale="pt" dateStyle="long" pattern="dd/MM/yyyy HH:mm"  timeZone="Brazil/East"/>
							</h:outputText> 
	
							<p:outputLabel value="#{msgs.CicleEnd} :"/>
							<h:outputText value="#{scheduleBean.selCycle.microCycles[fn:length(scheduleBean.selCycle.microCycles)-1].endDate}">
								<f:convertDateTime locale="pt" dateStyle="long" pattern="dd/MM/yyyy HH:mm"  timeZone="Brazil/East"/>
							</h:outputText>
						</h:panelGrid>
					</p:tab>
					<p:tab title="#{msgs.RelatedCycles}">  
								
					</p:tab>
					<p:tab title="#{msgs.Programming}">
					</p:tab>
				</p:accordionPanel>					
			</p:tab>
			<p:tab  title="#{msgs.Prescriptions}">

			</p:tab>
			<p:tab title="#{msgs.Exercises}">
			
			</p:tab>
		</p:tabView>
	</ui:define>

	<ui:define name="dialogs">

	<p:dialog id="modalAddModality" header="#{msgs.New}..." resizable="false"  
             showEffect="clip" hideEffect="fold" widgetVar="wmodalAddModality" appendToBody="true" >
		<h1>Inserir tela de pesquisa de modalidades</h1>
	</p:dialog>

	<p:dialog id="newCycleType" header="#{msgs.New}..." resizable="false"  
             showEffect="clip" hideEffect="fold" widgetVar="wnewCycleType" appendToBody="true" >
		<h:form prependId="false">
			<h:panelGrid cellpadding="5" columns="3" style="border:none" >
				<p:outputLabel value="#{msgs.Name}:" />
				<p:inputText id="cycleTypeName" 	value="#{scheduleBean.newName}" 	/>
				<p:watermark for="cycleTypeName" 	value="#{msgs.CycleType}"  		 	/>  

				<p:outputLabel value="#{msgs.Periodicity}:" />
				<p:selectOneMenu  value="#{scheduleBean.selCycleType.periodicity}" style="width:150px" >
					<f:selectItem itemValue="0" itemLabel="#{msgs.Personalized} ..."  />
					<f:selectItems value="#{scheduleBean.selSchedule.microCycles}" 
						var="microCycle" itemLabel="#{microCycle.name}"  itemValue="#{microCycle.name}" />
					<p:ajax listener="#{scheduleBean.calculateCycles}" update="tblCycles,:messages" />
				</p:selectOneMenu>
				<p:spacer/>

				<h:outputLabel value="#{msgs.Description} :" for="cicleDescription" />
				<p:inputTextarea id="cicleDescription" rows="5" cols="30"
					counter="counter" maxlength="120" 
					counterTemplate="{0} #{msgs.CharsRemaining}" autoResize="false"
					value="#{ scheduleBean.selCycleType.description}" />
				<p:spacer />
				<p:spacer />
				<h:outputText id="counter" />
				<p:spacer />

			</h:panelGrid>
			<br/>
			<p:dataTable id="tblCycles"  value="#{scheduleBean.selCycleType.cycles}" var="cycle" editable="true" editMode="cell" 
				paginator="true" paginatorPosition="bottom" rows="5" paginatorAlwaysVisible="false" style="width:400px">
				<f:facet name="header">
					<p:outputLabel value="#{msgs.Cycles}" style="align:center" />
					<div align="right">
						<p:commandButton id="btnNewCicle" icon="ui-icon-plus" actionListener="#{scheduleBean.newPeriod}" update="tblCycles" styleClass="ui-button-icon-only" />
					</div>
				</f:facet>

				<p:column style="width:2%">
					<p:rowToggler  />
				</p:column>

				<p:column headerText="#{msgs.Name}" style="width:50px">
					<p:cellEditor> 
						<f:facet name="output">
							<h:outputText value="#{cycle.name}" />
						</f:facet>  
						<f:facet name="input">
							<p:inputText  value="#{cycle.name}" style="width:96%"/>
						</f:facet>  
					</p:cellEditor>
				</p:column>

				<p:column headerText="#{msgs.Begin}" style="width:50px">
					<h:outputText value="#{cycle.microCycles[0].beginDate}">
						<f:convertDateTime locale="pt" dateStyle="long" pattern="dd/MM/yyyy"  timeZone="Brazil/East"/>
					</h:outputText> 
				</p:column>
				<p:column headerText="#{msgs.End}" style="width:50px">
					<h:outputText value="#{cycle.microCycles[fn:length(cycle.microCycles)-1].endDate}">
						<f:convertDateTime locale="pt" dateStyle="long" pattern="dd/MM/yyyy"  timeZone="Brazil/East"/>
					</h:outputText>
				</p:column>
				<p:column style="width:15px">
					<p:commandButton  icon="ui-icon-trash" 	style="margin:none;height:15px;width:15px;background:none;border:none"  styleClass="ui-button-icon-only" />
				</p:column>
				
				<p:rowExpansion> 
					<p:outputLabel value="#{msgs.MicroCycles}" />
			        <h:outputText id="displayRange" value="#{msgs.Weeks} #{cycle.begWeek} #{msgs.to} #{cycle.endWeek}"/>                    
			        <p:slider for="txt6,txt7" display="displayRange" style="width:350px" range="true"  
			        	displayTemplate="#{msgs.Weeks} {min} #{msgs.to} {max}" maxValue="#{fn:length(scheduleBean.selSchedule.microCycles)}"/> 
				    <h:inputHidden id="txt6" value="#{cycle.begWeek}" required="false"/>
				    <h:inputHidden id="txt7" value="#{cycle.endWeek}" required="false"/>
				</p:rowExpansion>

			</p:dataTable>
			<p:commandButton value="#{msgs.Save}" 	actionListener="#{scheduleBean.addCycle}" update=":formSchedule, :messages"  oncomplete="wnewCycleType.hide();"  />			
			<p:commandButton value="#{msgs.Cancel}"   onclick="wnewCycleType.hide();" />	
		
		</h:form>		
	</p:dialog>


	<p:dialog id="newSchedule" header="#{msgs.New}..." resizable="false"  
             showEffect="clip" hideEffect="fold" widgetVar="wnewSchedule" appendToBody="true" >

		<h:form prependId="false">
			<p:selectOneMenu  value="#{scheduleBean.newType}" style="width:200px" required="true" >
				<f:selectItem  	itemLabel="#{msgs.Select}"			itemValue="0"/>
				<f:selectItem  	itemLabel="#{msgs.CycleType}"		itemValue="1"/>
				<f:selectItem 	itemLabel="#{msgs.Cycle}"			itemValue="2"/>
				<f:selectItem 	itemLabel="#{msgs.Goal}"			itemValue="3"/>
				<f:selectItem 	itemLabel="#{msgs.Competition}"		itemValue="4"/>
				<p:ajax event="change" update="panelNew"  />
			</p:selectOneMenu>

			<br/><br/>
			<h:panelGrid id="panelNew" columns="2" style="border:none" >
				<p:outputLabel value="#{msgs.Name}:" rendered="#{scheduleBean.newType != 0}" />
				<p:inputText id="newName" 	value="#{scheduleBean.newName}" rendered="#{scheduleBean.newType != 0}"/>
				<p:watermark for="newName" 	value="#{msgs.CycleType}"  		rendered="#{scheduleBean.newType == 1}" />  
				<p:watermark for="newName" 	value="#{msgs.Cycle}" 			rendered="#{scheduleBean.newType == 2}" />
				<p:watermark for="newName" 	value="#{msgs.Goal}" 			rendered="#{scheduleBean.newType == 3}"/>
				<p:watermark for="newName" 	value="#{msgs.Competition}" 	rendered="#{scheduleBean.newType == 4}"/>
			</h:panelGrid>
				<br/>
				<p:commandButton type="button" value="#{msgs.Save}" rendered="#{scheduleBean.newType != 0}"/>			
				<p:commandButton type="button" value="#{msgs.Cancel}" rendered="#{scheduleBean.newType != 0}" onclick="wnewSchedule.hide();" />			
		</h:form>		
	</p:dialog>
	</ui:define>
</ui:composition>

</html>